<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class绑定样式</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .basic{
                height: 200px;
                width: 300px;
                border:solid 4px black;
                text-align: center;
                line-height: 200px;
                font-size: 30px;
                font-weight: bolder;
            }

            /* 开心 */
            .happy {
                border:solid 4px rgb(17, 34, 192);
                background-color:crimson;
            }

            /* 伤心 */
            .sad {
                border:solid 4px rgb(13, 177, 76);
                background-color:slategrey
            }

             /* 正常 */
            .normal {
                border:solid 4px rgb(235, 194, 13);
                background-color: steelblue;
            }

            button{
                margin-top: 20px;
                margin-left: 100px;
                margin-bottom: 20px;
            }

            .classStyle1{
                background-color: chartreuse;
                border: 4px solid sandybrown;
            }

            .classStyle2{
                border-radius: 50px;
            }

            .classStyle3{
                font-size: 20px;
                font-weight: bolder;
            }





        </style>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">

            <!-- 绑定class样式--字符串写法,适用于样式的类名不确定,需动态绑定-->
            <div class="basic" :class="moodStyle">
                心情画布
            </div>
            <button v-on:click="changeMood">切换心情颜色</button>

            <!-- 绑定class样式--数组写法,适用于样式的类名不确定,个数也不确定 -->
            <div class="basic" :class="arr">
                class样式绑定数组写法
            </div>

            <!-- 绑定class样式--对象写法,适用于样式的类明确定,个数也确定 -->
            <div class="basic" :class="classObj">
                class样式绑定数组写法
            </div>

        </div>

        <script type="text/javascript">
            // vue实例
            const vm = new Vue({
                el:'#root',

                data:{
                    moodStyle:'normal',
                    arr:['classStyle1','classStyle2','classStyle3'],
                    classObj:{
                        classStyle1:true,
                        classStyle2:true,
                        classStyle3:true,
                    }
                },

                methods: {
                    //随机改变颜色
                    changeMood:function(){
                        this.moodStyle = 'happy'
                        const arr = ['happy','sad','normal']
                        console.log(Math.floor(Math.random()*3)); 
                        const index = Math.floor(Math.random()*3)
                        this.moodStyle = arr[index]
                    }
                },

            })
        </script>    
    </body>
</html>